window.onload = function() {
    lb();
    abc();
    djs();
}


    function abc() {
        var banner = document.querySelector(".banner");
        var bannerHeight = banner.offsetHeight;
        var topNav = document.querySelector(".topNav")

        window.onscroll = function () {
            var offsetTop = document.body.scrollTop || document.documentElement.scrollTop;
            var op = 0; 
            if(offsetTop < bannerHeight) {
                op = offsetTop / bannerHeight;
                // console.log(bannerHeight);
                topNav.style.backgroundColor = "rgba(233, 35, 34, "+ op +")";
            }
        }
    }


    function lb() {
        //轮播图
        var banner = document.querySelector(".banner");
        var imgWidth = banner.offsetWidth;
        var uu = document.querySelector(".uu");
        var lis = uu.children;
        uu.appendChild(lis[0].cloneNode(true));
        /*insertBefore(需要插入的dom元素，位置)*/
        uu.insertBefore(lis[lis.length-2].cloneNode(true),uu.firstChild);
        var count = lis.length;
        uu.style.width = count * imgWidth + "px";
        for(var i = 0; i < count; i++) {
            lis[i].style.width = imgWidth + "px";
        }
         var index = 1;
        /*4.当屏幕变化的时候，重新计算宽度*/
        window.onresize=function(){
            /*4.1.获取banner的宽度,覆盖全局的宽度值*/
            imgWidth=banner.offsetWidth;
            /*4.2 设置图片盒子的宽度*/
            uu.style.width=count*imgWidth+"px";
            /*4.3设置每一个li(图片)元素的宽度*/
            for(var i=0;i<lis.length;i++){
                lis[i].style.width=imgWidth+"px";
            }
            /*4.4重新设置定位值*/
            uu.style.left=-index*imgWidth+"px";
        };

        // 实现点标记
        function setCircle(index) {
            var circle = document.querySelector(".circle");
            var lis = circle.children;
            
            for (var i = 0; i < lis.length; i++) {
                lis[i].classList.remove("active");
            }
            lis[index-1].classList.add("active");
        }

        // 自动轮播
        var timerId; 
        function startTime() {
          timerId = setInterval(function() {
                index++;
                uu.style.transition = "left .5s";
                uu.style.left = -index * imgWidth + "px";
                setTimeout(function() {
                    if(index == count - 1) {
                        // clearInterval(timerId);
                        index = 1;
                        uu.style.transition = "none";
                        uu.style.left = -index * imgWidth + "px";
                    }
                },500);
            },1000)
        }
        startTime();

        // 手动轮播
        var startX,moveX,distanceX;
        var flag = true;
        uu.addEventListener("touchstart",function(e) {
            clearInterval(timerId);
            startX = e.targetTouches[0].clientX;
        });
        uu.addEventListener("touchmove",function(e) {
            if(flag) {
                // console.log(touchmove);
                moveX = e.targetTouches[0].clientX;
                distanceX = moveX - startX;
                uu.style.transition = "none";
                uu.style.left = (-index * imgWidth + distanceX) + "px";
            }
        });
       
        uu.addEventListener("touchend",function() {
            flag = false;
            if(Math.abs(distanceX) > 100) {
                if(distanceX > 0) {
                    index--;
                }
                else {
                    index++;
                }
                uu.style.transition = "left 1s";
                uu.style.left = (-index * imgWidth) + "px";
            }
            else if (Math.abs(distanceX) > 0 ) {
                uu.style.transition = "left 1s";
                uu.style.left = (-index * imgWidth) + "px";
            }
            startX = 0;
            moveX = 0;
            distanceX = 0;
        })

        uu.addEventListener("webkitTransitionEnd",function () {
            if(index == 0) {
                index = count - 2;
                uu.style.transition = "none";
                uu.style.left = (-index * imgWidth) + "px";
            }
            else if (index == count - 1) {
                index = 1;
                uu.style.transition = "none";
                uu.style.left = (-index * imgWidth) + "px";
            };
                setCircle(index);
                flag = true;
                clearInterval(timerId);
                startTime();
            
        })
    }

    
    function djs() {
        var time_l = document.querySelector(".time_l");
        var spans = time_l.children;
        var totalTime = 3700;

        sss();
        var timeId = setInterval(sss,1000)
        function sss() { 
            totalTime--;
            if(totalTime < 0) {
                clearInterval(timeId);
                return;
            }
            var hour = Math.floor(totalTime / 3600);
            var mintue = Math.floor(totalTime / 3600 % 60);
            var second = Math.floor(totalTime % 60);
    
            spans[1].innerHTML = Math.floor(hour / 10);
            spans[2].innerHTML = Math.floor(hour % 10);
            spans[4].innerHTML = Math.floor(mintue / 10);
            spans[5].innerHTML = Math.floor(mintue % 10);
            spans[7].innerHTML = Math.floor(second / 10);
            spans[8].innerHTML = Math.floor(second % 10);
        }    
    }